<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <style>
        ol li a {
            background-color: rgba(0, 0, 0, 1) !important;
        }

        .three_this {
            background-color: #ebba92 !important;
        }

    </style>

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img  class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>
    <fieldset class="layui-elem-field site-demo-button">
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="">
                    <button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
                </li>
<!--                向右箭头-->
<!--                <fieldset class="layui-elem-field site-demo-button">-->
<!--                    <div>-->
<!--                        <button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>-->
<!--                    </div>-->
<!--                </fieldset>-->

                <li class="layui-nav-item">
                    <!--                    layui-nav-itemed-->
                    <a class="" href="javascript:;">部门管理</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:void(0);"  class="ad">部门管理</a>
                        </dd>
                        <dd><a href="javascript:;" class="ad">恢复部门</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">员工管理</a>
                    <dl class="layui-nav-child">

                        <dd><a href="javascript:;">员工管理</a></dd>
                        <dd><a href="javascript:;">恢复员工</a></dd>
                        <dd><a href="">查询员工</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">产品管理</a>
                    <dl class="layui-nav-child">
                        <dd><a id="pswEdit" href="javascript:;">产品管理</a></dd>
                        <dd><a href="javascript:;">恢复产品</a></dd>
                        <dd><a href="">查询产品</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">出入库管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">出入库管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">客户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">客户管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">订单管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">订单管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">业绩报表</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">部门业绩统计</a></dd>
                        <dd><a href="javascript:;">产品业绩销售统计</a></dd>
                        <dd><a href="javascript:;">员工个人业绩</a></dd>
                    </dl>
                </li>

            </ul>
        </div>
    </div>

    <div class="layui-body">




                <script src="../../layui/lay/layui.js" charset="utf-8"></script>
                <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
                <script>
                    layui.use('element', function(){
                        var $ = layui.jquery,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

                        //触发事件
                        var active = {
                            tabAdd: function(){
                                //新增一个Tab项
                                element.tabAdd('demo', {
                                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                                    ,content: '内容'+ (Math.random()*1000|0)
                                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                                })
                            }
                            ,tabDelete: function(othis){
                                //删除指定Tab项
                                element.tabDelete('demo', '44'); //删除：“商品管理”


                                othis.addClass('layui-btn-disabled');
                            }
                            ,tabChange: function(){
                                //切换到指定Tab项
                                element.tabChange('demo', '22'); //切换到：用户管理
                            }
                        };

                        $('.site-demo-active').on('click', function(){
                            var othis = $(this), type = othis.data('type');
                            active[type] ? active[type].call(this, othis) : '';
                        });

                        //Hash地址的定位
                        var layid = location.hash.replace(/^#test=/, '');
                        element.tabChange('test', layid);

                        element.on('tab(test)', function(elem){
                            location.hash = 'test='+ $(this).attr('lay-id');
                        });

                    });
                </script>



        <!-- 内容主体区域 -->
        <div style="padding: 1px;">内容主体区域
            <div class="a">

                <form class="layui-form" action="" lay-filter="partForm">
                    <div class="layui-form-item" style="margin-top:200px">
                        <div class="layui-inline">
                            <label class="layui-form-label">部门名称</label>
                            <div class="layui-input-block" style="width:200px">
                                <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">部门备注</label>
                            <div class="layui-input-inline" style="width:200px">
                                <input type="text" name="remark" lay-verify="remark" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <button type="button" id="formSubmit" class="layui-btn" lay-submit="" lay-filter="query">查询</button>
                        <button type="button" id="add" class="layui-btn layui-btn-warm" lay-submit="" lay-filter="add">新增部门</button>
                    </div>

                </form>
            </div>
            <div class="a">2
            </div>
            <div class="a">3</div>





        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>

<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>

<script>
    //JavaScript代码区域
    layui.use(['element', 'jquery'], function () {
        var element = layui.element, $ = layui.jquery;
        $("#menu_three").on("click", function () {
            $(this).next().toggle();
        })
        $("ol").on("click", "li a", function () {
            $.each($(this).parent().siblings(), function (i, e) {
                $(e).find("a").removeClass('three_this')
            });
            $(this).addClass('three_this');                            // 添加当前元素的样式
        })
    });
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="https://www.layuicdn.com/layui-v2.5.5/layui.js" charset="utf-8"></script>

        <script>
            layui.use(['table','form','jquery','layer'], function(){
                var table = layui.table;
                var form = layui.form;
                var $ = layui.jquery;
                var layer = layui.layer;
                table.render({
                    id : 'partTable'
                    ,elem: '#test'
                    ,url:'/firstWeb/part/queryLike'
                    ,title: '用户数据表'
                    ,where: {}
                    ,cols: [[
                        {field:'id', title:'部门编号'}
                        ,{field:'name', title:'部门名称'}
                        ,{field:'remark', title:'部门备注'}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                    ]]
                    ,page: true // 默认一页十条
                    ,limit:5
                    ,limits: [1,5,10,20]
                });

                function tableReload() {
                    var data = form.val('partForm');
                    table.reload('partTable',{
                        where : data
                        ,page: {
                            curr: 1
                        }
                    })
                }
                $("#formSubmit").click(function(){
                    tableReload();
                });

                $("#add").click(function() {
                    layer.open({
                        type: 2 //此处以iframe举例
                        ,title: '新增页面'
                        ,area: ['390px', '260px']
                        ,shade: 0
                        ,maxmin: true
                        ,content: 'dialog.html'
                        ,btn: ['提交', '关闭']
                        ,yes: function(index){
                            var data = window['layui-layer-iframe' + index].getValue();
                            if (!data.name) {
                                layer.msg("部门名称不能为空");
                                return false;
                            }
                            //发送新增请求 get/post √
                            axios.post('/firstWeb/part/savePart', data).then(function (response) {
                                //post请求执行成功的回调
                                if (response.data.status == "1") {
                                    layer.close(index);
                                    //刷新表格
                                    tableReload();
                                    layer.msg("新增成功");
                                } else {
                                    layer.msg(response.data.msg)
                                }
                            }).catch(function (error) {
                                console.log(error);
                            });
                        }
                        ,no: function(index){//5
                            layer.close(index);
                        }
                    });
                })



                //监听行工具事件
                table.on('tool(test)', function(obj){
                    var data = obj.data;
                    console.log(obj);
                    if(obj.event === 'del'){//删除
                        layer.confirm('真的删除行么', function(index){
                            axios.post('/firstWeb/part/updateState', data).then(function (response) {
                                //post请求执行成功的回调
                                if (response.data.status == "1") {
                                    layer.close(index);
                                    //刷新表格
                                    tableReload();
                                    layer.msg("删除成功");
                                } else {
                                    layer.msg(response.data.msg)
                                }
                            }).catch(function (error) {
                                console.log(error);
                            });
                            obj.del();
                            layer.close(index);
                        });
                    } else if(obj.event === 'edit') {//编辑
                        layer.open({
                            type: 2 //此处以iframe举例
                            ,title: '修改页面'
                            ,area: ['390px', '260px']
                            ,shade: 0
                            ,maxmin: true
                            ,content: 'dialog.html'
                            ,btn: ['提交', '关闭']
                            ,yes: function(index){
                                var data = window['layui-layer-iframe' + index].getValue();
                                data.id = obj.data.id;
                                if (!data.name) {
                                    layer.msg("部门名称不能为空");
                                    return false;
                                }
                                //发送新增请求 get/post √
                                axios.post('/firstWeb/part/update', data).then(function(response) {
                                    //post请求执行成功的回调
                                    if (response.data.status == "1") {
                                        layer.close(index);
                                        //刷新表格
                                        tableReload();
                                        layer.msg("更新成功");
                                    } else {
                                        layer.msg(response.data.msg)
                                    }
                                }).catch(function (error) {
                                    console.log(error);
                                });
                            }
                            ,no: function(index){//5
                                layer.close(index);
                            }
                        });
                    }
                });
            });
        </script>




</body>

<script>
    window.onload = function () {
        var a= document.querySelectorAll(".a");
        var  ad = document.querySelectorAll(".ad");
        console.log(a)
        for(var i = 0; i<ad.length;i++){
            ad[i].index = i;
            ad[i].onclick = function () {
                console.log("aa")
                for(var j = 0;j<a.length;j++){
                    a[j].style.display = "none";
                }
                a[this.list].style.display="block";
            }
        }
    }

</script>
</html>